<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="page_root" style="padding: 20px">
				<el-card class="box-card" shadow="never">
                    <div style="display: flex;justify-content: space-between">
                        <span style="font-size: 20px">历史数据</span>
                    </div>
                    <el-divider></el-divider>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="受检单位">
                            <el-input v-model="searchCompany"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="records" stripe style="width: 100%" :height="tableHeight">
                        <el-table-column prop="company" label="受检单位" ></el-table-column>
                        <el-table-column prop="address" label="地址" width="250"></el-table-column>
                        <el-table-column prop="createDate" label="创建时间" width="150"></el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="edit(scope.row)" type="primary" size="small">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

					<el-pagination
							background
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="[10,20,30]"
							:page-size="pagesize"
							layout="total,prev, pager, next,sizes"
							:total="count"
					></el-pagination>
				</el-card>

			</div>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
                    // 是否加载数据
                    loading:true,
                    currentPage:1,
                    pagesize:10,
                    count:0,
                    records:[],
                    searchCompany:"",
                    tableHeight: document.documentElement.clientHeight - 265,
				},

				created() {
					window.cache = window.parent.cache;
                    this.getData()
				},
				methods: {
                    handleSizeChange:function(size){
                        this.pagesize = size;
                        this.getData();
                    },
                    // 控制页面的切换
                    handleCurrentChange: function(currentPage) {
                        this.currentPage = currentPage;
                        this.getData();
                    },
					getData(){
						this.doPost()
					},

                    search(){
                        this.currentPage = 1;
                        this.pagesize = 10;
                        this.getData();
                    },

                    edit(row){
                      // window.parent.index.menuIdx = 'yp.html';
                      window.parent.index.record = row;
                      // window.parent.index.ypList = [];
                      // window.parent.index.tabIdx = "0";
                      // window.parent.index.ypItemActive = "0";
                      // window.parent.index.flag = true;
                      // window.parent.index.menuClick('yp.html')
                      window.parent.index.getRecordData()
                    },


                    doPost(){
                        var that = this
                        $.post("http://localhost/record/list/",{company:this.searchCompany,pageNo:this.currentPage,size:this.pagesize},res => {
                            that.count = res.data.count
							that.records = res.data.list
							console.log(that)
                        })
                    }
				},
                mounted() {
                    var that = this;
                    window.onresize = () => {
                        return (() => {
                            window.fullHeight = document.documentElement.clientHeight;
                            that.tableHeight = window.fullHeight - 200;  // 高
                        })()
                    };
                },
			})
		</script>
	</body>
</html>
